<template>
  <d2-container>
    <div class="record-wrap">
      <div class="record-top">
        <span>部门</span>
        <el-select
          v-model="params.department_id"
          placeholder="请选择"
          @change="sectionChange"
        >
          <el-option
            v-for="item in sectionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <el-table
        :data="recordList"
        style="width: 100%"
        border
        empty-text="暂无订报记录"
        class="record-table"
      >
        <el-table-column prop="department_name" label="部门" align="center">
        </el-table-column>
        <el-table-column prop="newspaper_name" label="组名称" align="center">
        </el-table-column>
        <el-table-column
          prop="create_time"
          width="200"
          label="上传时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="department_name"
          label="票据明细"
          align="center"
          width="410"
        >
          <template slot-scope="scope">
            <div class="record-images">
              <div v-for="val in scope.row.images">
                <el-image
                  style="width: 56px; height: 56px"
                  class="record-img"
                  v-if="val.extension === 'png' || val.extension === 'jpg'"
                  :src="val.url"
                  :preview-src-list="getImgUrls(scope.row.images)"
                >
                </el-image>
             
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="180">
          <template slot-scope="scope">
            <div>
              <el-button
                class=""
                type="primary"
                size="small"
                @click="handleEdit(scope.row, 'view')"
              >
                查看
              </el-button>
              <el-button
                type="primary"
                size="small"
                :disabled="scope.row.is_download === 1"
                @click="handleEdit(scope.row, 'edit')"
              >
                编辑
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="record-bottom">
        <el-pagination
          background
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="total"
          :page-size="15"
          class="recode-paper"
        >
        </el-pagination>
      </div>
    </div>
    <record-edit
      v-if="dialogVisibles"
      :rowId="rowId"
      :viewType="viewType"
      :dialog-visibles="dialogVisibles"
      @update="updateTable"
    ></record-edit>
  </d2-container>
</template>

<script>
import { request } from "@/api/_service.js";
import recordEdit from "./components/recordEdit.vue";
export default {
  components: {
    recordEdit,
  },
  data() {
    return {
      viewType: "view",
      sectionList: [],
      recordList: [],
      params: {
        department_id: "",
        page: 1,
      },
      rowId: "",
      total: 0,
      dialogVisibles: false,
    };
  },
  mounted() {
    this.getSection();
    this.getRecordList();
  },

  methods: {
    getSection() {
      request({
        url: "/mapi/department/index",
        method: "post",
      }).then((res) => {
        // console.log(res, '/mapi/department/index')
        this.sectionList = [
          {
            id: "",
            name: "全部",
          },
        ].concat(res.data);
      });
    },
    getRecordList() {
      request({
        url: "/mapi/newspaper/getNewspaperLog",
        method: "post",
        data: this.params,
      }).then((res) => {
        this.recordList = res.data.data;
        this.total = res.data.total;
        console.log( res.data, this.total,'/mapi/department/index')
      });
    },
    handleEdit(row, type) {
      this.viewType = type;
      this.dialogVisibles = true;
      this.rowId = row.id;
    },
    currentChange(val) {
      console.log(val,'this.totalthis.total')
      this.params.page = val;
      this.getRecordList();
    },
    sectionChange(val) {
      this.params.page = 1;
      this.params.department_id = val;
      this.getRecordList();
    },
    getImgUrls(list) {
      const imgs = [];
      list.map((val) => {
        if (val.extension === "png" || val.extension === "jpg") {
          imgs.push(val.url);
        }
      });
      return imgs;
    },
    updateTable() {
      this.dialogVisibles = false;
      this.params.page = 1;
      this.getRecordList();
    },
  },
};
</script>
<style lang="scss" scoped>
.record-wrap {
  .record-top {
    font-size: 16px;
    margin-bottom: 26px;

    span {
      margin-right: 16px;
    }
  }

  .record-table {
    font-size: 16px;

    &::v-deep td.el-table__cell {
      border-right-color: #f3f3f3;
      border-bottom-color: #f3f3f3;
    }

    &::v-deep th.el-table__cell {
      border-right-color: #f3f3f3;
      border-bottom-color: #f3f3f3;
      background: #f4f8fb;
      color: #808184;
      font-weight: normal;
    }
  }

  .el-button {
    font-size: 14px;
    padding: 7px 15px;
    border-radius: 6px;
    &:hover {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
    &.el-button--primary {
      background: #036af2;
    }
    &.el-button.is-disabled {
      background-color: #a0cfff;
      border-color: #a0cfff;
    }
  }

  .record-images {
    display: flex;
    & > div {
      display: flex;
    }
    .record-img {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      margin-right: 10px;
    }
    a {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
  }

  .record-bottom {
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
  }

  .recode-paper {
    &::v-deep .el-pager li.active {
      background: #036af2 !important;
    }
  }
}
</style>
